<template>
	<view class="content">
		<view class="g-header"></view>
		<view class="innerPre">
			<view class="homeBlock1">
				<view class="header1Text">深圳比亚迪科技有限公司</view>
				<view class="header1Icon"></view>
				<view class="header2Icon" @click="showNotice"></view>
				<view class="header3Icon"></view>
			</view>
			<view class="homeBlock2">
				<view class="homeBlock2InputIcon"></view>
				<view class="homeBlock2Input">
					<!-- <uni-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick"></uni-easyinput> -->
					<input type="text" placeholder="请输入搜索内容" />
				</view>
			</view>
			<view class="homeBlock3">
				<view class="homeMenuLi">
					<view class="homeMenuLiIcon homeMenuLiIcon1" @click="toAddBd"></view>
					<view class="homeMenuLiText">扫一扫</view>
				</view>
				<view class="homeMenuLi" @click="toRecharge">
					<view class="homeMenuLiIcon homeMenuLiIcon2"></view>
					<view class="homeMenuLiText">充值</view>
				</view>
				<view class="homeMenuLi">
					<view class="homeMenuLiIcon homeMenuLiIcon3" @click="toReceiptMine"></view>
					<view class="homeMenuLiText">发票</view>
				</view>
			</view>
		</view>
		<view class="inner">
			<view class="innerB1">
      </view>
			<view class="innerB2">
				<view class="moduleTitle1">取水统计</view>

				<view class="innerB2Content">
					<view class="innerB2Content1">
						<view class="moduleTitle3 moduleTitle30">今天取水</view>
						<canvas canvas-id="chart1" id="chart1" class="chart1" @touchend="tap" />
					</view>
					<view class="innerB2Content2">
						<view class="moduleTitle3 moduleTitle31">当月取水</view>
						<view class="iContentTitle">150L</view>
						<view class="iContentValue"><view class="iContentValueInner iContentValueInner1" :style="{ width: '20%' }"></view></view>
						<view class="moduleTitle3 moduleTitle32">今年取水</view>
						<view class="iContentTitle">2999L</view>
						<view class="iContentValue"><view class="iContentValueInner iContentValueInner2" :style="{ width: '50%' }"></view></view>
					</view>
				</view>
				<view class="innerB2Content3">
					<view class="moduleTitle3 moduleTitle33" style="margin-top: 30px;">
						日均用水分析
						<span style="float: right;" @click="toWatterDetail()">详情</span>
					</view>
					<view class="moduleUnit">单位：L/H</view>
					<canvas canvas-id="chartLine" id="chartLine" class="chartLine" @touchend="tap" />
				</view>
			</view>
			<view class="innerB3">
				<view class="moduleTitle1">水舱使用</view>
				<view class="innerB3Content">
					<view class="innerB3Content1">
						<view class="moduleTitle3 moduleTitle30">最佳使用时间比</view>
						<view class="chartWrap"><canvas canvas-id="chart2" id="chart2" class="chart2" @touchend="tap" /></view>
					</view>
					<view class="innerB2Content2">
						<view class="moduleTitle3 moduleTitle30">设备使用比</view>
						<view class="chartWrap"><canvas canvas-id="chart3" id="chart3" class="chart3" @touchend="tap" /></view>
					</view>
				</view>
			</view>
			<view class="innerB4">
				<view class="moduleTitle1">饮水分析</view>
				<view class="moduleTitle3">各时间段用水</view>
				<view class="moduleUnit">单位：L/H</view>
				<canvas canvas-id="column" id="column" class="charts" @touchend="tap" />
				<view class="moduleTitle3">四季平均用水</view>
				<canvas canvas-id="chart6" id="chart6" class="chart6" @touchend="tap" />
			</view>
		</view>
		<view class="innerNext"></view>
		<menu-bottom></menu-bottom>
	</view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'
import uCharts from '@qiun/ucharts'

let uChartsInstance = {}
export default {
	components: {},
	data() {
		return {
			title: 'Hello',
			list: [],
			cWidth: 750,
			cHeight: 500
		}
	},
	onLoad() {
		console.log('utils', util.modelGet('userInfo'))
		this.id = this.$Route.query.id
		console.log('this.id', this.id)
		this.drawCharts('column', {})
		this.drawChartsLine('chartLine', {
			categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
			series: [
				{
					name: '用水',
					data: [35, 8, 25, 37, 4, 20],
					pointShape: 'none'
				}
			]
		})
		this.drawCharts1('chart1', {})
		this.drawCharts2('chart2', { series: [{ data: [{ name: '最佳使用期', value: 50 }, { name: '保质期内', value: 30 }, { name: '已过期', value: 20 }] }] })
		this.drawCharts2('chart3', { series: [{ data: [{ name: '茶吧机', value: 50 }, { name: '智水机', value: 30 }, { name: '底座', value: 20 }] }] })

		// 最下面的饼图
		this.drawCharts6('chart6', {
			series: [
				{
					data: [
						{ name: '茶吧机', value: 50, labelText: '春季 25%' },
						{ name: '智水机', value: 30, labelText: '夏季 25%' },
						{ name: '底座', value: 20, labelText: '秋季 25%' },
						{ name: '底座', value: 20, labelText: '冬季 25%' }
					]
				}
			]
		})
	},
	onShow() {},
	mounted() {},
	onReady() {},
	methods: {
		toAddBd() {
			util.message('请打开摄像头~')
		},
		toRecharge() {
			util.linkTo('/pages/index/recharge')
		},
		showNotice() {
			util.linkTo('/pages/index/waterIntakeNotice')
		},
		toReceiptMine() {
			util.linkTo('/spages/user/receiptMine')
		},
		toWatterDetail() {
			util.linkTo('/pages/index/waterIntakeList')
		},
		drawCharts2(id, data) {
			const ctx = uni.createCanvasContext(id, this)
			uChartsInstance[id] = new uCharts({
				type: 'ring',
				context: ctx,
				width: uni.upx2px(320),
				height: uni.upx2px(200),
				series: data.series,
				animation: true,
				rotate: false,
				rotateLock: false,
				background: '#FFFFFF',
				color: ['#319DFE', '#9D62E2', '#F96FB5'],
				padding: [0, 0, 0, 0],
				dataLabel: false,
				legend: {
					show: true,
					position: 'right',
					fontSize: 10,
					fontColor: '#8C8C8C'
				},
				// title: {
				//   name: "收益率",
				//   fontSize: 15,
				//   color: "#666666"
				// },
				// subtitle: {
				//   name: "70%",
				//   fontSize: 25,
				//   color: "#7cb5ec"
				// },
				extra: {
					markLine: {},
					ring: {
						ringWidth: 15,
						activeOpacity: 0.5,
						activeRadius: 2,
						offsetAngle: -90,
						labelWidth: 0,
						border: false,
						customRadius: 35
					}
				}
			})
		},
		drawCharts6(id, data) {
			const ctx = uni.createCanvasContext(id, this)
			uChartsInstance[id] = new uCharts({
				type: 'ring',
				context: ctx,
				width: uni.upx2px(600),
				height: uni.upx2px(350),
				series: data.series,
				animation: true,
				rotate: false,
				rotateLock: false,
				background: '#FFFFFF',
				color: ['#6488F8', '#F96FB5', '#9D62E2', '#31CCC9'],
				padding: [0, 0, 0, 0],
				dataLabel: true,
				legend: {
					show: false,
					position: 'right',
					fontSize: 10,
					fontColor: '#8C8C8C'
				},
				// title: {
				//   name: "收益率",
				//   fontSize: 15,
				//   color: "#666666"
				// },
				// subtitle: {
				//   name: "70%",
				//   fontSize: 25,
				//   color: "#7cb5ec"
				// },
				extra: {
					markLine: {},
					ring: {
						ringWidth: 15,
						activeOpacity: 0.5,
						activeRadius: 2,
						offsetAngle: -90,
						labelWidth: 0,
						border: false
						// customRadius: 35,
					}
				}
			})
		},
		drawChartsLine(id, data) {
			const ctx = uni.createCanvasContext(id, this)
			uChartsInstance[id] = new uCharts({
				type: 'area',
				context: ctx,
				width: uni.upx2px(650),
				height: uni.upx2px(350),
				categories: data.categories,
				series: data.series,
				animation: true,
				background: '#FFFFFF',
				color: ['#36CFC9', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 15, 0, 15],
				legend: { show: false },
				xAxis: { disableGrid: true },
				yAxis: {
					gridType: 'dash',
					dashLength: 2,
					data: [{ min: 0, axisLine: false }]
				},
				extra: {
					tooltip: { showArrow: false },
					area: {
						type: 'curve',
						opacity: 0.6,
						addLine: true,
						width: 2,
						gradient: true
					}
				}
			})
		},
		drawCharts1(id, data) {
			const ctx = uni.createCanvasContext(id, this)
			uChartsInstance[id] = new uCharts({
				type: 'arcbar',
				context: ctx,
				width: uni.upx2px(250),
				height: uni.upx2px(250),
				series: [
					{
						name: '正确率',
						color: '#2FBBFF',
						data: 0.8
					}
				],
				animation: true,
				background: '#FFFFFF',
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: undefined,
				title: {
					name: '15L',
					fontSize: 20,
					color: '#000000'
				},
				// subtitle: {
				//   name: '正确率',
				//   fontSize: 25,
				//   color: '#666666',
				// },
				extra: {
					arcbar: {
						type: 'circle',
						width: 15,
						backgroundColor: '#F0F0F0',
						startAngle: 1.5,
						endAngle: 0.25,
						gap: 2,
						linearType: 'custom',
						// customColor: ['#177FFF', '#2FBBFF'],
						customColor: ['#177FFF']
					}
				}
			})
		},
		drawCharts(id, data) {
			const ctx = uni.createCanvasContext(id, this)
			uChartsInstance[id] = new uCharts({
				type: 'column',
				context: ctx,
				width: uni.upx2px(650),
				height: uni.upx2px(350),
				categories: ['6-8', '6-8', '6-8', '6-8', '6-11', '6-8'],
				series: [
					{
						name: '目标值',
						data: [35, 36, 31, 33, 13, 34]
					}
				],
				animation: true,
				background: '#FFFFFF',
				padding: [15, 15, 0, 5],
				xAxis: { disableGrid: true },
				yAxis: {
					gridType: 'dash',
					axisLineColor: 'transparent',
					data: [{ min: 0, axisLine: false }]
				},
				legend: { show: false },
				extra: {
					tooltip: {
						showArrow: false,
						gridColor: 'red'
					},
					column: {
						type: 'group',
						width: 20,
						activeBgColor: '#000000',
						activeBgOpacity: 0.05,
						linearType: 'custom',
						seriesGap: 5,
						linearOpacity: 0.5,
						barBorderCircle: true,
						customColor: ['#A8DAFF', '#39A2FE']
					}
				}
			})
		},
		tap(e) {
			uChartsInstance[e.target.id].touchLegend(e)
			uChartsInstance[e.target.id].showToolTip(e)
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #f5f5f5;
}

.innerPre {
	background: linear-gradient(180deg, rgba(23, 127, 255, 0.699999988079071) 0%, #177fff 100%);
	opacity: 1;
	padding: 32px;
	padding-top: 88px; // 88

	font-size: 28px;
	font-weight: normal;
	color: #ffffff;

	border-radius: 0px 0px 100px 100px/0px 0px 40px 40px;

	padding-bottom: 100px;

	.homeBlock1 {
		margin-top: 20px;
		display: flex;
		align-items: center;
		.header1Text {
		}
		.header1Icon {
			width: 48px;
			height: 48px;
			margin-left: 20px;

			background-image: url(#{$bgPath}/icon_direct_down_white_max.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
		}
		.header2Icon {
			width: 48px;
			height: 48px;

			background-image: url(#{$bgPath}/icon_message_white.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;

			margin-left: auto;
		}
		.header3Icon {
			width: 48px;
			height: 48px;
			margin-left: 20px;

			background-image: url(#{$bgPath}/icon_add_more.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;

			margin-right: 20px;
		}
	}

	.homeBlock2 {
		margin-top: 20px;
		padding: 20px;
		background: #ffffff;
		border-radius: 8px 8px 8px 8px;
		display: flex;
		align-items: center;
		.homeBlock2InputIcon {
			width: 50px;
			height: 50px;
			background-color: white;
			margin-left: 20px;
			margin-right: 20px;
			background-image: url(#{$bgPath}/icon_search.png);
			background-size: 95%;
		}
		.homeBlock2Input {
			color: black;
		}
	}

	.homeBlock3 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20px;
		.homeMenuLi {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: column;
			padding: 20px;
			.homeMenuLiIcon {
				width: 80px;
				height: 80px;
				margin-left: 20px;
				margin-right: 20px;

				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100% 100%;
			}
			.homeMenuLiIcon1 {
				background-image: url(#{$bgPath}/icon_home_00.png);
			}
			.homeMenuLiIcon2 {
				background-image: url(#{$bgPath}/icon_home_01.png);
			}
			.homeMenuLiIcon3 {
				background-image: url(#{$bgPath}/icon_home_02.png);
			}
			.homeMenuLiText {
				margin-top: 10px;
			}
		}
	}
}

.inner {
	padding: 20px;
}

.innerNext {
}

.innerB1 {
	width: 100%;
	height: 240px;
	border-radius: 16px 16px 16px 16px;
	background-color: lightgrey;

  background-image: url(#{$bgPath}/home_bg_01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

	margin-top: -100px;
	img {
		width: 100%;
		height: 240px;
	}
}

.innerB2 {
	padding: 32px;
	background-color: white;
	margin-top: 24px;
	.innerB2Content {
		display: flex;
		.innerB2Content1 {
			flex: 0 0 50%;
		}
		.innerB2ContentChart {
			overflow: auto;
		}
		.innerB2Content2 {
			flex: 0 0 50%;
			.iContentTitle {
				font-size: 28px;
				font-weight: 600;
				color: #000000;
				line-height: 44px;
				margin-top: 20px;
			}
			.iContentValue {
				position: relative;
				width: 300px;
				height: 16px;
				background: #f0f0f0;
				border-radius: 10px 10px 10px 10px;
				margin-top: 20px;
				margin-bottom: 20px;
				.iContentValueInner {
					position: absolute;
					left: 0;
					top: 0;
					height: 16px;
					border-radius: 10px 10px 10px 10px;
					opacity: 1;
				}
				.iContentValueInner1 {
					background: linear-gradient(90deg, #feb664 0%, #ff834a 100%);
				}
				.iContentValueInner2 {
					background: linear-gradient(90deg, #fd9490 0%, #f6323b 100%);
				}
			}
		}
		.innerB2Content3 {
			margin-top: 20px;
		}
	}
}

.innerB3 {
	padding: 26px;
	background-color: white;
	margin-top: 24px;
	.innerB3Content {
		display: flex;
		.innerB3Content1 {
			flex: 0 0 50%;
			overflow: hidden;
		}
		.innerB2Content2 {
			flex: 0 0 50%;
			overflow: hidden;
		}
		.chartWrap {
		}
		.chart2 {
			width: 325px;
			height: 200px;
		}
		.chart3 {
			width: 310px;
			height: 200px;
		}
	}
}

.innerB3 {
	padding: 26px;
	background-color: white;
	margin-top: 24px;
}

.innerB4 {
	padding: 32px;
	background-color: white;
	margin-top: 24px;
}

.moduleTitle1 {
	font-size: 32px;
	color: #000000;
}

.moduleTitle2 {
	font-size: 28px;
	color: #8c8c8c;
}

.moduleUnit {
	font-size: 20px;
	font-weight: normal;
	color: #bfbfbf;
	line-height: 32px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.moduleTitle3 {
	margin: 10px 0;
	font-size: 28px;
	line-height: 28px;
	color: #8c8c8c;
	padding-left: 20px;
	border-left: 4px solid #177fff;
	&.moduleTitle30 {
		border-left: 4px solid #177fff;
	}
	&.moduleTitle31 {
		border-left: 4px solid #ff7431;
	}
	&.moduleTitle32 {
		border-left: 4px solid #f6363e;
	}
	&.moduleTitle33 {
		border-left: 4px solid #36cfc9;
	}
}

.chart1 {
	width: 250px;
	height: 250px;
}

.chartLine {
	width: 100%;
	height: 350px;
}

.charts {
	width: 100%;
	height: 350px;
}

.chart6 {
	width: 100%;
	height: 350px;
}
</style>
